<template>
  <div>
    <Modal draggable :footer-hide="true" :title="modalTitle" v-model="modAdd">
      <Form
        :label-width="80"
        :model="formAddHTD"
        :rules="formAddHTDRule"
        ref="formAddHTD"
      >
        <FormItem label="合同段号:" prop="nodeName">
          <Input placeholder="请填写合同段号" v-model="formAddHTD.nodeName" />
        </FormItem>
        <FormItem label="编号:" prop="prefix">
          <Input placeholder="请填写编码" v-model="formAddHTD.prefix" />
        </FormItem>
        <FormItem label="起讫桩号:" prop="qqzh">
          <Input placeholder="请填写起讫桩号" v-model="formAddHTD.qqzh" />
        </FormItem>
        <FormItem label="施工单位:" prop="sgdw_id">
          <Select ref="sgdwSelect" v-model="formAddHTD.sgdw_id" filterable>
                <Option v-for="item in departList" :value="item.nodeId" :key="item.nodeId">{{ item.nodeName }}</Option>
            </Select>
          <!-- <Input placeholder="请填写施工单位" v-model="formAddHTD.sgdw" /> -->
        </FormItem>
        <FormItem label="监理单位:" prop="jldw_id">
          <Select ref="jldwSelect" v-model="formAddHTD.jldw_id" filterable>
                <Option v-for="item in departList" :value="item.nodeId" :key="item.nodeId">{{ item.nodeName }}</Option>
            </Select>
          <!-- <Input placeholder="请填写监理单位" v-model="formAddHTD.jldw" /> -->
        </FormItem>
        <FormItem>
          <div style="text-align:center">
            <Button @click="modAdd = false" style="margin-right: 30px"
              >取消</Button
            >
            <Button
              @click="submitformAdd('formAddHTD')"
              style="margin-right: 50px"
              type="primary"
              >保存</Button
            >
          </div>
        </FormItem>
      </Form>
    </Modal>

    <Card :bordered="false" :dis-hover="true">
       <div class="table-title-wrapper1">
        <h3 slot="title">项目基本信息管理</h3>
         <Button
            @click="handleSubmit('formItem')"
            type="primary"
            >保 存</Button>
      </div>
      <div>
        <h4>项目基本信息</h4>
        <Form :model="formItem" :rules="formRule" inline ref="formItem">
          <FormItem class="form-item" label="线路名称">
            <Input
              placeholder="请填写线路名称"
              style="width:320px;"
              v-model="formItem.linename"
            />
          </FormItem>

          <FormItem class="form-item" label="项目名称" prop="name">
            <Input
              placeholder="请填写项目名称"
              style="width:320px;"
              v-model="formItem.name"
            />
          </FormItem>

          <FormItem class="form-item" label="项目简称" prop="shortname">
            <Input
              placeholder="请填写项目简称"
              style="width:320px;"
              v-model="formItem.shortname"
            />
          </FormItem>

          <FormItem class="form-item" label="项目编码" prop="prefix">
            <Input
              placeholder="请填写项目编号"
              style="width:320px;"
              v-model="formItem.prefix"
            />
          </FormItem>

          <FormItem class="form-item" label="公路等级" prop="plevel">
            <Select
              placeholder="请选择公路等级"
              style="width:320px;"
              v-model="formItem.plevel"
            >
              <Option :key="item.id" :value="item.id" v-for="item in grades">{{
                item.name
              }}</Option>
            </Select>
          </FormItem>

          <FormItem class="form-item" label="设计荷载">
            <Input style="width:320px;"
            v-model="formItem.load" />
          </FormItem>

          <FormItem class="form-item" label="建设单位" prop="builderName">
            <!-- <Input
              placeholder="请填写建设单位"
              style="width:320px;"
              v-model="formItem.builderName"
            /> -->
             <Select style="width:320px;" v-model="formItem.builder" filterable>
                <Option v-for="item in departList" :value="item.nodeId" :key="item.nodeId">{{ item.nodeName }}</Option>
            </Select>
          </FormItem>

          <FormItem class="form-item" label="设计单位" prop="sjdwName">
            <!-- <Input style="width:320px;"
              placeholder="请填写建设单位"
            v-model="formItem.sjdwName" /> -->
            <Select style="width:320px;" v-model="formItem.sjdw" filterable>
                <Option v-for="item in departList" :value="item.nodeId" :key="item.nodeId">{{ item.nodeName }}</Option>
            </Select>
          </FormItem>
        </Form>

        <div>

        </div>
      </div>

      <div class="table-title-wrapper">
        <h4>施工合同段信息</h4>
        <Button @click="addModal" type="primary">新增合同段</Button>
      </div>
      <Table :columns="col" :data="htds" stripe></Table>
    </Card>
    <!-- 删除提示框 -->
    <Modal v-model="modalDelete" width="360">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>确认删除？</span>
        </p>
        <div style="text-align:center">
            <p>数据删除后不可恢复，请确认是否删除数据？</p>
        </div>
        <div slot="footer">
            <Button type="error" size="large" long  @click="htdDelete">删除</Button>
        </div>
    </Modal>
  </div>
</template>

<script>
import axios from '@/libs/api.request';
import { setProject } from '@/libs/util';

import {
  departmentList
} from '@/api/staff.js';

export default {
  name: 'project_info',
  data () {
    return {
      formItem: {
        id: 0,
        nodeid: 0,
        name: '',
        builder: '',
        builderName: '',
        sjdw: '',
        sjdwName: '',
        plevel: '',
        levelName: '',
        linename: '',
        shortname: '',
        prefix: '',
        load: ''
      },
      modalTitle: '新增施工合同段',
      formRule: {
        name: [{ required: true, message: '请填写项目名称', trigger: 'blur' }],
        // builderName: [
        //   { required: true, message: '请填写建设单位', trigger: 'blur' }
        // ],
        levelName: [
          { required: true, message: '请选择公路等级', trigger: 'change' }
        ],
        prefix: [
          { required: true, message: '请填写项目编号', trigger: 'blur' }
        ],
        shortname: [
          { required: true, message: '请填写项目简称', trigger: 'blur' }
        ],
        builder: [{ required: true, message: '请填写建设单位', trigger: 'change', type: 'number' }],
        sjdw: [{ required: true, message: '请填写施工单位', trigger: 'change', type: 'number' }]
      },
      departList: [
      ],
      grades: [],
      col: [
        {
          title: '施工合同段号',
          align: 'center',
          key: 'name'
        },
        {
          title: '编码前缀',
          align: 'center',
          key: 'prefix'
        },
        {
          title: '起讫桩号',
          align: 'center',
          key: 'qqzh'
        },
        {
          title: '施工单位',
          align: 'center',
          key: 'sgdw_name'
        },
        {
          title: '监理单位',
          align: 'center',
          key: 'jldw_name'
        },
        {
          title: '操作',
          key: 'nodeid',
          align: 'center',
          width: 180,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '20px'
                  },
                  on: {
                    click: () => {
                      // console.log(params.row);
                      this.editHTD(params.row.id);
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.deleteContract(params.row.nodeid);
                      // this.htdDelete(params.row.nodeid);
                    }
                  }
                },
                '删除'
              )
            ]);
          }
        }
      ],
      htds: [],
      modAdd: false,
      modalDelete: false,
      formAddHTD: {
        nodeName: '',
        prefix: '',
        qqzh: '',
        sgdw_id: '',
        // jldw: '',
        jldw_id: ''
        // sgdw: ''
      },
      formEditHTD: {
        nodeName: '',
        prefix: '',
        qqzh: '',
        sgdw_id: '',
        // sgdw: '',
        // jldw: '',
        jldw_id: ''
      },
      formAddHTDRule: {
        nodeName: [
          { required: true, message: '请填写施工合同段号', trigger: 'blur' }
        ],
        prefix: [{ required: true, message: '请填写编码', trigger: 'blur' }],
        qqzh: [{ required: true, message: '请填写起讫桩号', trigger: 'blur' }],
        sgdw_id: [{ required: true, message: '请填写施工单位', trigger: 'change', type: 'number' }],
        jldw_id: [{ required: true, message: '请填写监理单位', trigger: 'change', type: 'number' }]
      },
      aaaa: {
        nodeId: 0
      },
      htdId: -1

    };
  },
  mounted () {
    this.getRoadGrades();
    // 获取项目基本信息
    this.getProjectInfo();
    this.getHTDList();
    this.departmentList();
  },
  methods: {
    getProjectInfo () {
      return axios
        .request({
          url: 'pt/project',
          method: 'post'
        })
        .then(response => {
          if (response.data.code !== 200) {
            this.$Message.error(response.data.message);
            return;
          }

          if (response.data.data) {
            response.data.data.sjdw = this.queryIdByName(response.data.data.sjdwName);
            response.data.data.builder = this.queryIdByName(response.data.data.builderName);
            this.formItem = response.data.data;
            setProject(this.formItem.name);
          }
        });
    },

    getHTDList () {
      return axios
        .request({
          url: '/pt/htd/infolist',
          method: 'post'
        })
        .then(rep => {
          if (rep.data.code !== 200) {
            this.$Message.error(rep.data.message);
            return;
          }
          // console.info(rep.data.data);
          this.htds = rep.data.data;
        });
    },
    async departmentList () {
      const res = await departmentList();
      const { data } = res.data;
      console.log(data, 'resss');
      this.departList = data;
      if (!this.formItem.builder) {
        this.formItem.builder = this.queryIdByName(this.formItem.builderName);
      }
      if (!this.formItem.sjdw) {
        this.formItem.sjdw = this.queryIdByName(this.formItem.sjdwName);
      }
    },
    // 增加合同段按钮
    addModal () {
      this.modAdd = true;
      this.modalTitle = '新增施工合同段';
      this.$nextTick(() => {
        this.handleReset('formAddHTD');
      });
    },
    // 编辑合同段弹框
    editHTD (id) {
      this.modAdd = true;
      this.modalTitle = '编辑施工合同段';
      this.htdId = id;
      this.handleReset('formAddHTD');
      return axios
        .request({
          url: '/pt/htd/view2?id=' + this.htdId,
          method: 'post'
        })
        .then(rep => {
          if (rep.data.code !== 200) {
            this.$Message.error(rep.data.message);
            return;
          }
          console.log('sdasd');

          this.formEditHTD = rep.data.data;
          this.formAddHTD = JSON.parse(JSON.stringify(this.formEditHTD));
        });
    },
    // 表单清空
    handleReset (name) {
      console.log(this.formAddHTD, 'this.formItem');
      this.$refs[name].resetFields();
    },
    handleSubmit (name) {
      this.$refs[name].validate(valid => {
        if (!this.formItem.plevel) {
          this.formItem.levelName = '';
          return;
        }
        if (this.formItem.builder) {
          this.formItem.builderName = this.queryNameById(this.formItem.builder);
        }
        if (this.formItem.sjdw) {
          this.formItem.sjdwName = this.queryNameById(this.formItem.sjdw);
        }
        if (valid) {
          return axios
            .request({
              url: 'pt/update',
              method: 'post',
              data: this.formItem
            })
            .then(response => {
              if (response.data.code !== 200) {
                this.$Message.error(response.data.message);
                return;
              }

              this.formItem.id = response.data.data;

              this.$Message.success('保存成功');
            });
        }
      });
    },
    queryNameById (id) {
      const deptArr = this.departList.filter(dept => dept.nodeId == id);
      if (deptArr && deptArr.length > 0) {
        return deptArr[0].nodeName;
      }
    },
    queryIdByName (name) {
      const deptArr = this.departList.filter(dept => dept.nodeName == name);
      if (deptArr && deptArr.length > 0) {
        return deptArr[0].nodeId;
      }
    },
    // 删除合同段
    deleteContract (e) {
      this.htdId = e;
      this.modalDelete = true;
    },
    getRoadGrades () {
      return axios
        .request({
          url: '/pt/other/allroadgrade',
          method: 'post'
        })
        .then(response => {
          if (response.data.code !== 200) {
            return;
          }
          this.grades = response.data.data;
        });
    },

    submitformAdd (name) {
      this.$refs[name].validate(valid => {
        if (!valid) {
          return;
        }

        if (valid) {
          console.log('formAddHTD', this.formAddHTD);
          console.log('formEditHTD', this.formEditHTD);
          // console.log(this.$refs.sgdwSelect.query);
          // console.log(this.$refs.jldwSelect.query);

          const flag = this.modalTitle === '新增施工合同段';
          // this.formAddHTD.sgdw = this.$refs.sgdwSelect.query;
          // this.formAddHTD.jldw = this.$refs.jldwSelect.query;
          const send = this.formAddHTD;
          let url = '';
          if (flag) {
            url = '/pt/htd/add';
          } else {
            send.id = this.htdId;
            url = '/pt/htd/edit';
          }
          // let url = flag ? '/pt/htd/add' : '/pt/htd/edit';
          return axios
            .request({
              url: url,
              method: 'post',
              data: send
            })
            .then(response => {
              this.modAdd = false;

              if (response.data.code !== 200) {
                return;
              }

              this.getHTDList();
            });
        }
      });
    },

    htdDelete () {
      const id = this.htdId;
      return axios
        .request({
          url: '/pt/htd/delete?id=' + id,
          method: 'post'
        })
        .then(response => {
          if (response.data.code !== 200) {
            return;
          }
          this.$Message.success('删除成功');
          this.modalDelete = false;
          this.getHTDList();
        });
    }
  }
};
</script>

<style lang="less" scoped>
.form-item {
  margin-left: 10px;
}

@media screen and (max-width: 1300px) {
  .logo-box {
    flex-direction: column;
    p {
      margin-left: -5px;
    }
  }
}
.table-title-wrapper {
  display: flex;
  align-items: center;
  margin: 10px 0;
  h4 {
    margin-right: 30px;
  }
}
.table-title-wrapper1 {
  justify-content: space-between;
  padding: 0px 0px 15px;
  display: flex;
  align-items: center;
  margin: 10px 0;
  h4 {
    margin-right: 30px;
  }
  border-bottom: 1px solid #dcdee2;
}
.ivu-card:hover {
}
</style>
